<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>WEB三维学习分析</title>
	<link rel="stylesheet" href="./static/css/main.css">
	<!-- <script src="./static/d3.js"></script> -->
	<style>
		ul {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			flex-wrap: wrap;
		}

		ul li {
			width: 50px;
			height: 20px;
			border: 1px solid seagreen;
			text-align: center;
			line-height: 20px;
			list-style-type: none;
		}

		li:hover {
			/* background-color: bisque; */
			cursor: pointer;
		}

		.drop-target {
			width: 600px;
			height: 300px;
			background-color: cadetblue;
			margin: 5rem;
		}

		.blue-background-class {
			background-color: #C8EBFB !important;
		}
	</style>
</head>

<body>
	<main id="app">
		<section id="css2d"></section>
		<ul>
			<li>0</li>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
			<li>11</li>
			<li>12</li>
			<li>13</li>
			<li>14</li>
			<li>15</li>
			<li>16</li>
			<li>17</li>
			<li>18</li>
			<li>19</li>
			<li>20</li>
			<li>21</li>
			<li>22</li>
			<li>23</li>
			<li>24</li>
			<li>25</li>
			<li>26</li>
			<li>27</li>
			<li>28</li>
			<li>29</li>
		</ul>
		<div class="drop-target"></div>
	</main>
	<script src="./main.js"></script>
</body>

</html>